<template>
  <div class="bg">
    <div></div>

    <div class="header">
      <div class="header_search">
        <img src="../../static/img/组件208.png" alt="" class="search_img" />
        <input placeholder="搜索职位" />
      </div>
    </div>
    <div class="text">
      <div class="header_text">
        <text class="header_text0">平面设计师</text>
        <text class="header_text1">销售总监</text>
        <text class="header_text2">产品设计</text>
      </div>
      <div class="screen">
        <text class="">筛选</text>
        <img class="screen_img" src="../../static/img/组件221.png" alt="" />
      </div>
    </div>
    <div class="work">
      <div class="work_title">
        <text class="work_text1">平面设计师</text>
        <img class="work_img" src="../../static/img/组件351.png" alt="" />
        <text class="work_text2">6—7k</text>
      </div>
      <div class="work_title">
        <text class="work_text3">成都创意科技有限公司</text>
        <text class="authentication">已认证</text>
        <text class="work_text5">20人以下</text>
      </div>
      <div class="work_title">
        <text class="work_text4">成都·武侯区·孵化园</text>
        <button class="btn">沟通</button>
      </div>
    </div>
    <div class="work">
      <div class="work_title">
        <text class="work_text1">UI设计师</text>
        <text class="work_text6">8—9k</text>
      </div>
      <div class="work_title">
        <text class="work_text3">成都创意科技有限公司</text>
        <text class="authentication">已认证</text>
        <text class="work_text5">20人以下</text>
      </div>
      <div class="work_title">
        <text class="work_text4">成都·武侯区·孵化园</text>
        <button class="btn">沟通</button>
      </div>
    </div>
    <div class="work">
      <div class="work_title">
        <text class="work_text1">视觉设计师</text>
        <img class="work_img" src="../../static/img/组件351.png" alt="" />
        <text class="work_text2">9—11k</text>
      </div>
      <div class="work_title">
        <text class="work_text3">成都创意科技有限公司</text>
        <text class="authentication">已认证</text>
        <text class="work_text5">20人以下</text>
      </div>
      <div class="work_title">
        <text class="work_text4">成都·武侯区·孵化园</text>
        <button class="btn">沟通</button>
      </div>
    </div>
    <div class="work">
      <div class="work_title">
        <text class="work_text1">UI设计师</text>
        <text class="work_text6">8—9k</text>
      </div>
      <div class="work_title">
        <text class="work_text3">成都创意科技有限公司</text>
        <text class="authentication">已认证</text>
        <text class="work_text5">20人以下</text>
      </div>
      <div class="work_title">
        <text class="work_text4">成都·武侯区·孵化园</text>
        <button class="btn">沟通</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.bg {
  background: #f2f5ff;
}
.header_search {
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid white;
  background-color: white;
  border-radius: 20px;
  width: 660rpx;
  height: 55rpx;
  margin: 0 45rpx;
  font-size: 28rpx;
}
.search_img {
  width: 40rpx;
  height: 40rpx;
  padding: 0 20rpx;
}
.search_img1 {
  width: 40rpx;
  height: 40rpx;
  margin: 20rpx;
}
.text {
  font-size: 30rpx;
  display: flex;
  margin-top: 37rpx;
}
.header_text {
  margin-left: 45rpx;
  border-right: 1rpx solid grey;
}
.header_text1 {
  margin-left: 30rpx;
}
.header_text2 {
  margin: 0 40rpx;
}
.screen_img {
  width: 30rpx;
  height: 30rpx;
  margin-left: 25rpx;
  line-height: 30rpx;
}
.screen {
  margin-left: 80rpx;
}

.work {
  width: 650rpx;
  height: 250rpx;
  background-color: white;
  margin: 30rpx 45rpx;
}
.work_title {
  display: flex;
  align-items: center;
  margin-left: 25rpx;
  margin-right: 18rpx;
  padding-top: 10rpx;
}
.work_img {
  width: 40rpx;
  height: 40rpx;
  margin-left: 16rpx;
}
.work_text1 {
  font-size: 40rpx;
  font-weight: bold;
}
.work_text2 {
  font-size: 30rpx;
  color: red;
  font-weight: bold;
  margin-left: 254rpx;
}
.work_text3 {
  font-size: 30rpx;
  margin: 20rpx 0;
}
.work_text4 {
  font-size: 30rpx;
  color: #999999;
}
.work_text5 {
  font-size: 30rpx;
  margin-left: 110rpx;
  color: #9b9b9b;
}
.work_text6 {
  font-size: 30rpx;
  color: red;
  font-weight: bold;
  margin-left: 340rpx;
}
.authentication {
  width: 60rpx;
  height: 30rpx;
  line-height: 30rpx;
  font-size: 18rpx;
  color: #feb755;
  border: 1rpx solid #feb755;
  margin-left: 18rpx;
}

.btn {
  width: 180rpx;
  height: 70rpx;
  border: 1rpx solid blue;
  background-color: white;
  line-height: 70rpx;
  font-size: 28rpx;
  margin-right: 10rpx;
}
</style>
